import { Map, MouseTool } from 'react-amap';
import { toLnglat } from 'react-amap/lib/utils/common';
import { Link } from 'dva/router';
import { connect } from 'dva';
import React, { Component, Fragment } from 'react';
import { Card, Button, Modal, Select, Radio, Form, Input, Table, Divider, message } from 'antd';
import styles from './FormStyles.less';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { isArray } from 'lodash';

function check(itemArray, itemName) {
  let filterItem = itemArray.filter(item => item.name === itemName);
  if (filterItem && isArray(itemArray)) {
    return itemArray[0].code;
  } else {
    return '';
  }
}

const RadioGroup = Radio.Group;
const FormItem = Form.Item;
const { Option } = Select;

const MapForm = Form.create()(props => {
  const {
    modalVisible,
    form,
    handleAdd,
    handleModalVisible,
    handleChange,
    cityList,
    shapeCodes,
    typeCodes,
    editItem,
    add,
    isEdit,
    center,
    openEditor,
    closeEditor,
    submitEdit,
  } = props;
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handleModalVisible();

      handleAdd(fieldsValue);
    });
  };
  const cancel = () => {
    closeEditor();
    handleModalVisible(false);
  };
  const { city, areaName, areaShape, areaType, areaId } = editItem;

  return (
    <div
      className={styles.mapForm}
      onOk={okHandle}
      style={{ display: modalVisible ? 'block' : 'none' }}
    >
      <FormItem
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 15 }}
        label="区域id"
        style={{ display: isEdit ? 'block' : 'none' }}
      >
        {form.getFieldDecorator('areaId', {
          rules: [{ required: false, message: '请输入区域名称...' }],
        })(<Input disabled placeholder="请输入区域名称" />)}
      </FormItem>
      <FormItem
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 15 }}
        label="区域中心"
        style={{ display: 'none' }}
      >
        {form.getFieldDecorator('center', {
          rules: [{ required: false, message: '请输入区域名称...' }],
        })(<Input disabled placeholder="请输入区域名称" />)}
      </FormItem>
      <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 15 }} label="城市">
        {form.getFieldDecorator('cityId', {
          rules: [{ required: true, message: '请输入区域名称...' }],
        })(
          <Select style={{ width: '100%' }} onChange={handleChange}>
            {cityList
              ? cityList.map(item => (
                  <Option key="name" value={item.code}>
                    {item.name}
                  </Option>
                ))
              : null}
          </Select>
        )}
      </FormItem>
      <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 15 }} label="区域名称">
        {form.getFieldDecorator('areaName', {
          rules: [{ required: true, message: '请输入区域名称...' }],
        })(<Input placeholder="请输入区域名称" />)}
      </FormItem>
      <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 15 }} label="区域半径">
        {form.getFieldDecorator('radius', {
          rules: [{ required: true, message: '请输入区域名称...' }],
        })(<Input placeholder="请输入区域名称" />)}
      </FormItem>
      <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 15 }} label="区域形状">
        {form.getFieldDecorator('areaShape', {
          rules: [{ required: true, message: '请选择角色类型...' }],
        })(
          <Select style={{ width: '100%' }}>
            {shapeCodes
              ? shapeCodes.map(item => (
                  <Option key="code" value={item.code}>
                    {item.name}
                  </Option>
                ))
              : null}
          </Select>
        )}
      </FormItem>
      <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 15 }} label="区域类型">
        {form.getFieldDecorator('areaType', {
          rules: [{ required: true, message: '请选择角色类型...' }],
        })(
          <Select style={{ width: '100%' }}>
            {typeCodes
              ? typeCodes.map(item => (
                  <Option key="code" value={item.code}>
                    {item.name}
                  </Option>
                ))
              : null}
          </Select>
        )}
      </FormItem>

      {isEdit ? (
        <div>
          <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 15 }} label="图形编辑">
            <Button className={styles.buttonStyle} type="primary" onClick={() => openEditor()}>
              开始编辑图形
            </Button>
            <Button onClick={() => closeEditor()}>关闭编辑图形</Button>
          </FormItem>
          <FormItem style={{ alignItems: 'center', justifyContent: 'center', display: 'flex' }}>
            <Button style={{ marginRight: 10 }} type="primary" onClick={() => submitEdit()}>
              确认提交
            </Button>
            <Button
              className={styles.buttonStyle}
              type="primary"
              onClick={() => handleModalVisible(false, false)}
            >
              取消
            </Button>
          </FormItem>
        </div>
      ) : (
        <FormItem style={{ alignItems: 'center', justifyContent: 'center', display: 'flex' }}>
          <Button style={{ marginRight: 10 }} type="primary" onClick={() => add()}>
            确认提交
          </Button>
          <Button
            className={styles.buttonStyle}
            type="primary"
            onClick={() => handleModalVisible(false, false)}
          >
            取消
          </Button>
        </FormItem>
      )}
    </div>
  );
});

export default MapForm;
